<template>
  <div>
    <div v-if="mode === 'row'">
      <environment-sensor v-if="sensor.code" :device="sensor" />
      <el-card>
        <div slot="header" class="header">
          <span>{{ $t('device.AirCondition') }}</span>
          <air-condition v-if="condition.code" :device="condition" show-whole />
        </div>
        <air-condition v-if="condition.code" :device="condition" show-list />
      </el-card>

      <el-card>
        <div slot="header" class="header">
          <span>{{ $t('device.Light') }}</span>
          <light :device="light" show-whole />
        </div>
        <light :device="light" show-list />
      </el-card>
      <el-card>
        <div slot="header" class="header">
          <span>{{ $t('device.Curtain') }}</span>
          <curtain :device="curtain" show-whole />
        </div>
        <curtain :device="curtain" show-list />
      </el-card>
      <el-card :header="$t('device.Screen')">
        <screen :device="screen" />
      </el-card>
    </div>
    <el-card v-else>
      <environment-sensor slot="header" :device="sensor" />
      <el-row>
        <el-col :span="6" align="center">
          <light :device="light" show-whole />
        </el-col>
        <el-col :span="12" align="center">
          <curtain :device="curtain" show-whole style="margin: 0 auto;" />
        </el-col>
        <el-col :span="6" align="center">
          <air-condition :device="curtain" show-whole />
        </el-col>
      </el-row>
      <screen :device="screen" />
    </el-card>
  </div>
</template>
<script>
  import BaseController from "./BaseController";
  import GatewayComponents from '@/views/device/components/controller/gateway'
  export default {
    name: "BleGatewayController",
    mixins: [BaseController],
    props: {
      mode: {
        type: String,
        default: 'row'
      }
    },
    components: {
      ...GatewayComponents
    },
    data() {
      return {
        light: {
          message: {}
        },
        condition: {
          message: {}
        },
        sensor: {
          message: {}
        },
        curtain: {
          message: {}
        },
        screen: {
          message: {}
        }
      }
    },
    methods: {
      setItemDevice(data) {
        const {
          devType
        } = data
        switch (devType) {
          case 2:
            this.light = Object.assign({}, data)
            break
          case 4:
            this.curtain = Object.assign({}, data)
            break
          case 8:
            this.sensor = Object.assign({}, data)
            break
          case 15:
            this.condition = Object.assign({}, data)
            break
          case 16:
            this.screen = Object.assign({}, data)
            break
        }
        this.$emit("input", this.device);
      }
    },
  };

</script>
<style scoped>
  .header {
    display: flex;
    justify-content: space-between;
  }

</style>
